<template>
  <el-card shadow="never">
    <div class="table-page-search-wrapper">
      <el-form :inline="true" :model="searchModel" size="small">
        <el-form-item label="分类编码">
          <el-input v-model="searchModel.code" placeholder="分类编码"></el-input>
        </el-form-item>
        <el-form-item label="资产大类">
          <el-select v-model="searchModel.classes" placeholder="资产大类">
            <el-option key="1" label="土地" :value="1"></el-option>
            <el-option key="2" label="房屋及构筑物" :value="2"></el-option>
            <el-option key="3" label="通用设备" :value="3"></el-option>
            <el-option key="4" label="车辆" :value="4"></el-option>
            <el-option key="5" label="专用设备" :value="5"></el-option>
            <el-option key="6" label="文物及陈列品" :value="6"></el-option>
            <el-option key="7" label="图书档案" :value="7"></el-option>
            <el-option key="8" label="家具用具及装具" :value="8"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="资产名称">
          <el-input v-model="searchModel.typeName" placeholder="分类名称"></el-input>
        </el-form-item>
        <el-form-item>
                <span style="float: left;overflow: hidden;" class="">
                    <el-button type="primary" @click="searchQuery" icon="el-icon-search">查询</el-button>
                    <el-button type="primary" @click="searchReset" icon="el-icon-refresh" style="margin-left: 8px">重置
                    </el-button>

                    <el-button @click="handleToggleSearch()" type="text" size="small">
                        {{ toggleSearchStatus ? '收起' : '展开' }}
                        <i :class="toggleSearchStatus ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
                    </el-button>
                </span>
        </el-form-item>
      </el-form>
    </div>
    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <el-button icon="el-icon-plus" size="small" class="addBtn" type="primary" @click="handleAdd">新增</el-button>
      <el-upload ref="upload"
                 :action="importExcelUrl"
                 :on-change="handleImportExcel"
                 :headers="tokenHeader"
                 :show-file-list = "false" >
        <el-button slot="trigger" size="small" type="primary">导入</el-button>
      </el-upload>

    </div>
    <!-- 列表 -->
    <div class="project">
      <el-table  size="small" :data="dataSource" border style="width: 100%" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
        <el-table-column prop="code" label="分类编码" ></el-table-column>
        <el-table-column label="资产大类" >
          <template slot-scope="scope">
            {{ ['土地','房屋及构筑物','通用设备','车辆','专用设备','文物及陈列品','图书档案','家具用具及装具'][scope.row.classes-1] }}
          </template>
        </el-table-column>
        <el-table-column prop="typeName" label="分类名称"></el-table-column>
        <el-table-column prop="depreciationMonth" label="折旧月数"></el-table-column>
        <el-table-column prop="note" label="备注" ></el-table-column>
        <el-table-column fixed="right" label="操作" width="280">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
            <el-popconfirm
              title="确定删除吗？"
              placement="top-start"
              @onConfirm="handleDelete(scope.row.id)">
              <el-button  slot="reference"  type="text">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="ipagination.total"
        :page.sync="ipagination.current"
        :limit.sync="ipagination.pageSize"
        @pagination="loadData"
      ></pagination>
    </div>
    <asset-classes-modal  ref="modalForm" @ok="modalFormOk"></asset-classes-modal>
  </el-card>
</template>

<script>

  import { SingleTableMixins } from '@/mixins/SingleTableMixins'
  import Pagination from '@/components/Pagination'
  import AssetClassesModal from './AssetClassesModal'

  export default {
    name: 'AassetClasses',
    mixins: [ SingleTableMixins ],
    components: { AssetClassesModal, Pagination},
    data() {
      return {
        url:{
          list: "/classes/list",
          delete: "/classes/delete",
          importExcelUrl:"/classes/importExcel"
        },
        /* 排序参数 */
        isorter:{
          column: 'code',
          order: 'asc'
        },
      }
    },
    computed:{
      importExcelUrl () {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
      }
    },
    methods: {

    }
  }
</script>

<style scoped>
  .addBtn{
    float: left;
    margin-bottom: 15px;
  }
  .el-table{
    border-radius: 7px;
  }

</style>
